import React, { Component } from 'react'

// 1.创建context对象,
const UserContext = React.createContext({
  name: 'coderzjd',
})

const ColorContext = React.createContext({
  color: 'red',
})

export class Test extends Component {
  render() {
    return (
      <>
        <div>父组件</div>
        <hr />
        <UserContext.Provider value={{ name: 'coder' }}>
          <ColorContext.Provider value={{ color: 'blue' }}>
            <TestSon></TestSon>
          </ColorContext.Provider>
        </UserContext.Provider>
        <hr />
      </>
    )
  }
}
export class TestSon extends Component {
  render() {
    return (
      <>
        <div>子组件1</div>
        <TestSon2></TestSon2>
      </>
    )
  }
}

function TestSon2(props) {
  return (
    <UserContext.Consumer>
      {user => {
        return (
          <ColorContext.Consumer>
            {color => {
              return (
                <>
                  <div>子组件2</div>
                  <div>{user.name}</div>
                  <div style={{ color: color.color ?? '' }}>{color.color}</div>
                </>
              )
            }}
          </ColorContext.Consumer>
        )
      }}
    </UserContext.Consumer>
  )
}
